import { init } from 'snabbdom/build/package/init'
import { h } from 'snabbdom/build/package/h'

import { attributesModule } from 'snabbdom/build/package/modules/attributes'
import { classModule } from 'snabbdom/build/package/modules/class';
import { propsModule } from 'snabbdom/build/package/modules/props';
import { styleModule } from 'snabbdom/build/package/modules/style';
import { eventListenersModule } from 'snabbdom/build/package/modules/eventlisteners'

import { list } from './list'


class Snabbdom {
  constructor () {
    this.oldVnode = document.querySelector('#app')
    this.vnode = h('div')
    this.patch = null
    this.list = list
    this.key = 10
    this.init()
  }
  init () {
    this.patch = init([
      attributesModule,
      classModule,
      propsModule,
      styleModule,
      eventListenersModule
    ])
    // 获取 offsetHeight 执行两次
    this._patch()
    this._patch()
  }

  _patch () {
    this.createVnode()
    this.setPatch()
  }

  // 创建新的vnode
  createVnode () {
    this.list.reduce((top, next) => {
      next.top = top
      return top + next.elmHeight + 10
    }, 0)
    this.vnode = h('div.main', [
      h('h3','Top 10 movies'),
      h('div.btnList', [
        h('div.btn-group', [
          h('div.title', 'Sort by:'),
          h('div.btn',  { on: {click: [this.getRankList.bind(this)]} }, 'Rank'),
          h('div.btn',  { on: {click: [this.getTitleList.bind(this)]} }, 'Title'),
          h('div.btn',  { on: {click: [this.getDescriptionList.bind(this)]} }, 'Description')
        ]),
        h('div.btn', { on: {click: [this.add.bind(this)]} } ,'add')
      ]),
      h('div.list', this.list.map(this.getlist.bind(this)) )
    ])
  }

  // patch 节点
  setPatch () {
    this.oldVnode = this.patch(this.oldVnode, this.vnode)
  }

  getlist (item, index) {
    return h('div.item', {
      key: item.rank,
      style: { 
        display: 'flex',
        transform: "translate(-200px, 0)",
        delayed: { transform: `translateY(${item.top+ 'px'})`, opacity: '1'},
        remove: { transform: `translate(200px, ${item.top+ 'px'})`, opacity: 0 }
      },
      hook: {
        insert: (el) => {
          item.elmHeight = el.elm.offsetHeight
        }
      }
    },[
      h('div.index', index + 1),
      h('div.listTitle', item.title),
      h('div.listDesc', item.desc),
      h('div.delete', { on: {click: [this.delete.bind(this, item)]} },'x')
    ])
  }

  add () {
    this.key++
    const rank = this.key % 10 === 0 ? 10 : this.key % 10 
    const newLi = JSON.parse(JSON.stringify(list.filter(item => item.rank === rank)))
    newLi[0].rank = this.key
    this.list = newLi.concat(this.list)
    this._patch()
  }

  delete (sel, e) {
    this.list = this.list.filter(item => item.rank !== sel.rank)
    this._patch()
  }

  // rank 排序
  getRankList () {
    this.list = this.list.sort((a, b) => {
      return a.rank - b.rank
    })
    this._patch()
  }
  // title 排序1
  getTitleList () {
    this.list = this.list.sort((a, b) => {
      return a.title.length - b.title.length
    })
    this._patch()
  }
  // desc排序
  getDescriptionList () {
    this.list = this.list.sort((a, b) => {
      return a.desc.length - b.desc.length
    })
    this._patch()
  }
}

new Snabbdom()
